<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-1.10.1.min.js"></script>
    <script src="../js/api.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        .wrap {
            width: 1200px;
            margin: 0 auto;
        }

        .wrap table {
            width: 100%;
            table-layout: fixed;
            border: 1px solid #333;
            border-collapse: collapse;
            line-height: 32px;
            text-align: center;
        }

        .wrap table td,
        .wrap table th {
            border: 1px solid #333;
            overflow: hidden;
        }

        .search_bar {
            overflow: hidden;
            margin-top: 50px;
            margin-bottom: 10px;
        }

        .search_bar .searchBox {
            float: left;
            border: 1px solid gray;
        }

        .search_bar .searchBox input {
            height: 30px;
            width: 300px;
            float: left;
            border: 0;
            outline: none;
            text-indent: 10px;
        }

        .search_bar .searchBox button {
            height: 30px;
            width: 60px;
            float: left;
            box-sizing: content-box;
            border: 0;
            outline: none;
        }

        .search_bar .searchBox {
            overflow: hidden;
        }

        .search_bar .orderBox {
            float: left;
            line-height: 30px;
        }

        .search_bar .orderBox>*>label {
            margin-right: 10px;
        }

        .search_bar .orderBox>* {
            margin-left: 20px;
            float: left;
            border: 1px dashed #333;
            padding: 0 20px;
        }

        .search_bar .orderBox .showNumBox {
            border: 0;
        }

        .search_bar select {
            vertical-align: middle;
            height: 30px;
            padding: 0 5px;
        }

        .pageChangeBox {
            text-align: center;
            margin-top: 20px;

        }

        .pageChangeBox button {
            height: 32px;
            width: 60px;
        }

        .pageChangeBox button:nth-child(2) {
            margin-left: 50px;
        }

        .goodsList ul {
            overflow: hidden;
            min-height: 304px;
        }

        .goodsList ul li {
            float: left;
            width: 20%;
            box-sizing: border-box;
            padding: 10px;
        }

        .goodsList ul li img {
            width: 100%;
        }

        .price {
            color: red;
        }

        .title {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        .pageChangeBox {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <div id="box">
        你好,<a href="./login.html">请登录</a>
        <a href="./goodsList.html">商品列表</a>
    </div>
    <div class="wrap">
        <div class="search_bar">
            <div class="searchBox">
                <input type="text" class="searchCon">
                <button class="searchBtn">搜索</button>
            </div>
            <div class="orderBox">
                <div class="orderColBox">
                    <label>
                        编号
                        <input type="radio" checked name="orderCol" class="orderCol" value="id">
                    </label>
                    <label>
                        商品id
                        <input type="radio" name="orderCol" class="orderCol" value="goodsId">
                    </label>
                    <label>
                        名称
                        <input type="radio" name="orderCol" class="orderCol" value="goodsName">
                    </label>
                    <label>
                        价格
                        <input type="radio" name="orderCol" class="orderCol" value="goodsPrice">
                    </label>
                </div>

                <div class="orderTypeBox">
                    <label>
                        升序
                        <input type="radio" checked name="orderType" class="orderType" value="asc">
                    </label>
                    <label>
                        降序
                        <input type="radio" name="orderType" class="orderType" value="desc">
                    </label>
                </div>

                <div class="showNumBox">
                    <select class="select">
                        <option value="5" selected>每页显示05条</option>
                        <option value="10">每页显示10条</option>
                        <option value="15">每页显示15条</option>
                        <option value="20">每页显示20条</option>
                    </select>
                </div>


            </div>
        </div>
        <div class="goodsList">
            <ul>
                <!-- <li>
                    <a href="">
                        <img src="https://img11.360buyimg.com/n7/jfs/t1/88913/14/1277/360157/5dbc0d7eE921d1187/b5b6a9c4a2c58c7b.jpg"
                            alt="">
                        <p class="price">￥5599.00</p>
                        <p class="title">Apple iPhone 11 (A2223) 128GB 紫色 移动联通电信4G手机 双卡双待</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="https://img11.360buyimg.com/n7/jfs/t1/88913/14/1277/360157/5dbc0d7eE921d1187/b5b6a9c4a2c58c7b.jpg"
                            alt="">
                        <p class="price">￥5599.00</p>
                        <p class="title">Apple iPhone 11 (A2223) 128GB 紫色 移动联通电信4G手机 双卡双待</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="https://img11.360buyimg.com/n7/jfs/t1/88913/14/1277/360157/5dbc0d7eE921d1187/b5b6a9c4a2c58c7b.jpg"
                            alt="">
                        <p class="price">￥5599.00</p>
                        <p class="title">Apple iPhone 11 (A2223) 128GB 紫色 移动联通电信4G手机 双卡双待</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="https://img11.360buyimg.com/n7/jfs/t1/88913/14/1277/360157/5dbc0d7eE921d1187/b5b6a9c4a2c58c7b.jpg"
                            alt="">
                        <p class="price">￥5599.00</p>
                        <p class="title">Apple iPhone 11 (A2223) 128GB 紫色 移动联通电信4G手机 双卡双待</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="https://img11.360buyimg.com/n7/jfs/t1/88913/14/1277/360157/5dbc0d7eE921d1187/b5b6a9c4a2c58c7b.jpg"
                            alt="">
                        <p class="price">￥5599.00</p>
                        <p class="title">Apple iPhone 11 (A2223) 128GB 紫色 移动联通电信4G手机 双卡双待</p>
                    </a>
                </li> -->

            </ul>
        </div>
        <div class="pageChangeBox">
            <div class="pageBox"></div>
        </div>
    </div>
</body>

<script>

    $(function () {
        // 全局变量 记录默认值 (点击时切换对应的值)
        var key = "";   // 默认搜索所有数据
        var orderCol = "id"; //默认按照学号排序
        var orderType = "asc"; //默认升序
        var pageIndex = 1; // 默认显示第一页
        var showNum = 10;   // 默认每页显示五条


        loadGoods();

        $(".orderCol").click(function () {
            orderCol = $(this).val();
            loadGoods();
        })

        $(".orderType").click(function () {
            orderType = $(this).val();
            loadGoods();
        })


        function loadGoods() {
            searchGoodsOrderLimit({ key, orderCol, orderType, pageIndex, showNum }).then(res => {
                console.log(res);
                var { status, detail, count, maxPage, list } = res;
                if (status) {

                    var html = "";
                    list.forEach(({ id, goodsId, goodsName, goodsPrice, bigPicList }) => {
                        html += `  <li>
                            <a href="./goodsDetail.html?gid=${goodsId}">
                                <img src="${bigPicList[0]}"
                                    alt="">
                                <p class="price">￥${goodsPrice}</p>
                                <p class="title">${goodsName}</p>
                            </a>
                        </li>`
                    })
                    $(".goodsList ul").html(html);
                } else {

                }

            })
        }
    })
</script>

</html>